<template>
    <div class="menu-column">
        <div class="logo">
            <img src="@/img/1.png" alt="">
            <span>餐饮系统</span>
        </div>
        <div class="mune">
            <!-- 首页 -->
            <div class="menu-item">
                <i class="iconfont icon-shouye"></i>
                <span><router-link to="/layout/home">首页</router-link></span>
            </div>

            <!-- 账号管理 -->
            <div class="menu-items" @click="toggleMenu('account')" :class="{ 'active': activeMenu === 'account' }">
                <div class="menu-items-title">
                    <div class="menu-items-title-icon">
                        <i class="iconfont icon-xitong-zhanghaoguanli"></i>
                        <span><router-link to="/layout/account">账号管理</router-link></span>
                    </div>
                    <i class="iconfont icon-xiangxia"></i>
                </div>
                <ul v-show="activeMenu === 'account'">
                    <li><router-link to="/layout/accountList">账号列表</router-link></li>
                    <li><router-link to="/layout/accountAdd">添加账号</router-link></li>
                    <li><router-link to="/layout/accountCenter">个人中心</router-link></li>
                    <li><router-link to="/layout/accountEdit">修改密码</router-link></li>
                </ul>
            </div>

            <!-- 商品管理 -->
            <div class="menu-items" @click="toggleMenu('goods')" :class="{ 'active': activeMenu === 'goods' }">
                <div class="menu-items-title">
                    <div class="menu-items-title-icon">
                        <i class="iconfont icon-shangpinguanli"></i>
                        <span><router-link to="/layout/goods">商品管理</router-link></span>
                    </div>
                    <i class="iconfont icon-xiangxia"></i>
                </div>
                <ul v-show="activeMenu === 'goods'">
                    <li><router-link to="/layout/goodsList">商品列表</router-link></li>
                    <li><router-link to="/layout/goodsAdd">商品添加</router-link></li>
                    <li><router-link to="/layout/goodsType">商品分类</router-link></li>
                </ul>
            </div>

            <!-- 订单管理 -->
            <div class="menu-item">
                <i class="iconfont icon-dingdanguanli"></i>
                <span><router-link to="/layout/orderList">订单管理</router-link></span>
            </div>

            <!-- 店铺管理 -->
            <div class="menu-item">
                <i class="iconfont icon-dianpuguanli"></i>
                <span><router-link to="/layout/shopInfo">店铺管理</router-link></span>
            </div>

            <!-- 数据统计 -->
            <div class="menu-items" @click="toggleMenu('statistics')"
                :class="{ 'active': activeMenu === 'statistics' }">
                <div class="menu-items-title">
                    <div class="menu-items-title-icon">
                        <i class="iconfont icon-tongjishuju"></i>
                        <span><router-link to="/layout/manage">统计数据</router-link></span>
                    </div>
                    <i class="iconfont icon-xiangxia"></i>
                </div>
                <ul v-show="activeMenu === 'statistics'">
                    <li><router-link to="/layout/goodsStatistics">商品统计</router-link></li>
                    <li><router-link to="/layout/orderStatistics">订单统计</router-link></li>
                </ul>
            </div>

            <!-- 权限管理 -->
            <div class="menu-items" @click="toggleMenu('permission')"
                :class="{ 'active': activeMenu === 'permission' }">
                <div class="menu-items-title">
                    <div class="menu-items-title-icon">
                        <i class="iconfont icon-quanxianguanli"></i>
                        <span><router-link to="/layout/permissions">权限管理</router-link></span>
                    </div>
                    <i class="iconfont icon-xiangxia"></i>
                </div>
                <ul v-show="activeMenu === 'permission'">
                    <li><router-link to="/layout/permissionInfo">权限管理</router-link></li>
                    <li><router-link to="/layout/rolePermission">角色管理</router-link></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义 activeMenu，用于记录当前展开的菜单项
const activeMenu = ref(null);

// 定义展开/折叠菜单的方法
const toggleMenu = (menuKey) => {
    // 如果点击的菜单项已经展开，则折叠它；否则展开
    activeMenu.value = activeMenu.value === menuKey ? null : menuKey;
};
</script>

<style scoped>
@import '@/assets/iconfont/iconfont.css';

.menu-column {
    width: 200px;
    height: 100vh;
    background-color: #304156;
}

.logo {
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
}

.logo span {
    margin-left: 10px;
    color: #fff;
}

.mune {
    width: 200px;
    color: #fff;
}

.mune i {
    color: #909399;
}

.menu-item {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.menu-item span {
    margin-left: 10px;
}

.menu-item span a {
    color: #fff;
}

.menu-items {
    min-height: 56px;
    padding: 0 20px;
    line-height: 56px;
}

.menu-items ul li a{
    color: #fff;
    margin-left: 20px;
}

.menu-items-title {
    display: flex;
    justify-content: space-between;
}

.menu-items-title-icon span {
    margin-left: 10px;
}
.menu-items-title-icon span a{
    color: #fff;
}
</style>